import {
  CloudUploadOutlined,
  EyeOutlined,
  FileTextOutlined,
  FolderOutlined,
} from "@ant-design/icons";
import { Button, Card, List, Modal, Tag, Typography, Upload } from "antd";

import React, { useState } from "react";

import "./index.less";

const { Title } = Typography;

const Page49: React.FC = () => {
  const [preview, setPreview] = useState<string | null>(null);
  const files = Array.from({ length: 12 }).map((_, i) => ({
    id: i + 1,
    name: `文档-${i + 1}.pdf`,
    size: `${(Math.random() * 5 + 1).toFixed(2)}MB`,
    type: i % 3 === 0 ? "pdf" : i % 3 === 1 ? "img" : "zip",
  }));

  return (
    <div className="page49-page">
      <Title level={2} className="page-title">
        文件管理与预览
      </Title>
      <Card
        title={
          <span>
            <FolderOutlined /> 文件上传
          </span>
        }
        style={{ marginBottom: 16 }}
      >
        <Upload.Dragger multiple iconRender={() => <CloudUploadOutlined />}>
          拖拽文件到此处或点击上传
        </Upload.Dragger>
      </Card>
      <Card
        title={
          <span>
            <FileTextOutlined /> 文件列表
          </span>
        }
      >
        <List
          grid={{ gutter: 16, column: 4 }}
          dataSource={files}
          renderItem={(item) => (
            <List.Item>
              <Card
                title={item.name}
                actions={[
                  <Button
                    type="link"
                    icon={<EyeOutlined />}
                    onClick={() => setPreview(item.name)}
                  >
                    预览
                  </Button>,
                ]}
              >
                <Tag
                  color={
                    item.type === "pdf"
                      ? "red"
                      : item.type === "img"
                        ? "blue"
                        : "orange"
                  }
                >
                  {item.type}
                </Tag>
                <div>大小：{item.size}</div>
              </Card>
            </List.Item>
          )}
        />
      </Card>

      <Modal
        open={!!preview}
        onCancel={() => setPreview(null)}
        footer={null}
        title="文件预览"
        width={720}
      >
        {preview ? (
          <div
            style={{
              height: 480,
              background: "#f0f2f5",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            预览占位：{preview}
          </div>
        ) : null}
      </Modal>
    </div>
  );
};

export default Page49;
